import React from 'react'
import ReactEcharts from 'echarts-for-react'

export const Leida = (props: any) => {
    const {data} = props
    var radius = '50%'
    var leiDaCenter = ['50%', '50%']
    var leiDadata = [
        {
            name: '少年',

        },
        {
            name: '青年',
        },
        {
            name: '中年',
        },
        {
            name: '老年',
        }

    ]
    var radarAllDatas = props.data
    var colorListRadar = ['#00FFA2', '#1EF0FF', '#FC6060']
    var leiDaArr = [] //雷达图
    var leiDaXzhou = [] //轮播的名称
    var legendLeiDa = [] //用于装legend的
    var displayLeiDaAllTitle = [] //显示雷达图的参数
    for (let z = 0; z < radarAllDatas.length; z++) {
        leiDaXzhou.push(radarAllDatas[z][0].name)
        legendLeiDa.push({
            // name: radarAllDatas[z][0].name,
            // icon: 'circle',
        })
        leiDaArr.push({
            name: radarAllDatas[z][0].name,
            type: 'radar',
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
                color: colorListRadar[z],
            },
            areaStyle: {
                color: colorListRadar[z],
                opacity: 0.3,
            },
            lineStyle: {
                color: colorListRadar[z],
                type: 'solid',
                width: 2,
                opacity: 1,
            },
            data: radarAllDatas[z],
        })
    }

    const option = {
        baseOption: {
            backgroundColor: 'transparent',
            legend: {
                show: true,
                orient: 'horizontal',
                top: 0,
                left: 'center',
                itemWidth: 16,
                itemHeight: 3,
                textStyle: {
                    fontSize: 14,
                    color: '#fff',
                },
                data: legendLeiDa,
            },
            radar: [
                {
                    indicator: leiDadata,
                    radius: radius,
                    center: leiDaCenter,
                    startAngle: 90,
                    splitNumber: 5,
                    shape: '',
                    name: {
                        show: true,
                        fontSize: 14,
                        color: '#fff',
                        formatter: function (value, indicator) {
                            return indicator.name
                        },
                    },
                    nameGap: 15,
                    splitArea: {
                        areaStyle: {
                            color: 'transparent',
                            shadowBlur: 10,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(3, 99, 126, 1)',
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(3, 99, 126, 1)',
                        },
                    },
                },
            ],

            series: leiDaArr, //series结束
        },
    }

    return (
        <div style={{width: '100%', height: '100%'}}>
            <ReactEcharts
                option={option as any}
                style={{height: '100%', width: '100%'}}
            />
        </div>
    )
}

export default Leida
